<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 500px;
            margin: 100px auto;
        }
        #box input{
            width: 200px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            border: 0;
            border-bottom: 1px solid #ccc;
            outline: none;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" class="ipt1" value="邮箱/ID/手机号">&nbsp;&nbsp;<input type="text" class="ipt2" value="密码">
    </div>
    <script>
        var box = document.getElementById('box');
        var ipt1 = box.querySelector('.ipt1');
        var ipt2 = box.querySelector('.ipt2');
        ipt1.onfocus = function(){
            if(this.value == '邮箱/ID/手机号'){
                this.value = '';
            }
        }
        ipt1.onblur = function(){
            if(this.value == ''){
                this.value = '邮箱/ID/手机号';
                this.style.color = '#ccc';
            }else{
                this.style.color = '#333';
            }
        }
        ipt2.onfocus = function(){
            if(this.value == '密码'){
                this.value = '';
            }
        }
        ipt2.onblur = function(){
            if(this.value == ''){
                this.value = '密码';
                this.style.color = '#ccc';
            }else{
                this.style.color = '#333';
                this.type = 'password';
            }
        }
    </script>
</body>
</html>